<template>
  <div id="sortBtn">
    <div class="triangle up" @click="sendDirection(true)"></div>
    <div class="triangle down" style="margin-top: 6px" @click="sendDirection(false)"></div>
  </div>
</template>
<script>
  export default{
    data(){
      return {}
    },
    mounted(){},
    methods:{
      sendDirection(value){
        this.$emit('getDirection',value);
      }
    }
  }
</script>
<style scoped>
  #sortBtn{
    position: absolute;
    top:0
  }

  #sortBtn .triangle{
    position:relative;
    width:0;
    height:0;
    border-style:solid;
    cursor: pointer;
  }

  #sortBtn .triangle.up{
    border-width: 0 6px 6px;
    border-color:transparent transparent #333;/*透明 透明  灰*/
  }

  #sortBtn .triangle.down{
    border-width:6px 6px 0;
    border-color:#333 transparent transparent;/*透明 透明  灰*/
  }

</style>
